import { Tabs } from 'antd';
import React from 'react';
import { FSMonitor } from './Component/FSMonitor';
import { SessionMonitor } from './Component/SessionMonitor';

const { TabPane } = Tabs;

interface RealTimeMonitorState {
  renderFSRealTime: boolean;
  renderFSHistory: boolean;
  renderSCRealTime: boolean;
  renderSCHistory: boolean;
}

export default class RealTimeMonitor extends React.Component<{}, RealTimeMonitorState> {
  private FSRealTimeRef: React.RefObject<FSMonitor>;

  private FSHistoryRef: React.RefObject<FSMonitor>;

  private SCRealTimeRef: React.RefObject<SessionMonitor>;

  private SCHistoryRef: React.RefObject<SessionMonitor>;

  constructor(prop: {}) {
    super(prop);
    this.FSHistoryRef = React.createRef();
    this.FSRealTimeRef = React.createRef();
    this.SCRealTimeRef = React.createRef();
    this.SCHistoryRef = React.createRef();
    this.state = {
      renderFSRealTime: true,
      renderFSHistory: true,
      renderSCRealTime: true,
      renderSCHistory: true,
    };
  }

  private onTabChange(key: string): void {
    if (key === '2') {
      this.FSRealTimeRef.current?.killPolling();
      this.SCRealTimeRef.current?.killPolling();
      this.FSHistoryRef.current?.refresh();
      this.SCHistoryRef.current?.refresh();
      this.setState({
        renderFSRealTime: false,
        renderSCRealTime: false,
        renderFSHistory: true,
        renderSCHistory: true,
      });
    } else {
      this.FSRealTimeRef.current?.startPolling();
      this.SCRealTimeRef.current?.startPolling();
      this.setState({
        renderFSRealTime: true,
        renderSCRealTime: true,
        renderFSHistory: false,
        renderSCHistory: false,
      });
    }
  }

  render() {
    const { FSRealTimeRef, FSHistoryRef, SCRealTimeRef, SCHistoryRef } = this;
    const { renderFSHistory, renderFSRealTime, renderSCHistory, renderSCRealTime } = this.state;
    return (
      <div className="realtime-monitor">
        <Tabs type="card" onChange={this.onTabChange.bind(this)} defaultActiveKey="1">
          <TabPane tab="实时" key="1">
            {renderFSRealTime && <FSMonitor ref={FSRealTimeRef} mode="realtime" />}
            {renderSCRealTime && <SessionMonitor ref={SCRealTimeRef} mode="realtime" />}
          </TabPane>
          <TabPane tab="历史" key="2">
            {renderFSHistory && <FSMonitor ref={FSHistoryRef} mode="history" />}
            {renderSCHistory && <SessionMonitor ref={SCHistoryRef} mode="history" />}
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
